<template>
  <div class="consume">
    <div class="consume_cont_top">
      <h2>泵房选择 ：</h2>
      <el-cascader :options="options" v-model="houseId" @change="getHouseId">
        <template slot-scope="{ node, data }">
          <span>{{ data.value }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
      <div class="consume_btn">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="日报表" name="day"></el-tab-pane>
          <el-tab-pane label="周报表" name="Week"></el-tab-pane>
          <el-tab-pane label="月报表" name="Month"></el-tab-pane>
          <el-tab-pane label="年报表" name="Year"></el-tab-pane>
          <el-tab-pane label="自定义" name="fix"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="consume_cont">
      <div class="consume_cont_left">
        <div class="left_select">
          <h2>时间 ：</h2>
          <el-date-picker v-model="dateValue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']" @change="changeDate" :disabled="custom">
          </el-date-picker>
        </div>
        <div class="consume_table">
          <el-table :data="dataArr" stripe style="width: 100%" :header-cell-style="{ color: '#17E8FF' }">
            <!-- <el-table-column type="cont1" label="日期">
            </el-table-column> -->
            <el-table-column prop="fd_date" label="日期">
            </el-table-column>
            <el-table-column prop="fd_water_cnt" label="供水量（m³）">
            </el-table-column>
            <el-table-column prop="fd_elec_cnt" label="用水量（KWh）">
            </el-table-column>
            <el-table-column prop="per" label="每吨水耗电量">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="consume_cont_right">
        <div class="three_echarts_cont">
          <div class="three_echarts1"></div>
        </div>
        <div class="three_echarts_cont">
          <div class="three_echarts2"></div>
        </div>
        <div class="three_echarts_cont">
          <div class="three_echarts3"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      dataArr: [],
      activeName: 'day',
      tabPosition: 'left',
      options: [],
      radio: 1,
      startDate: '',
      endDate: '',
      dateValue: '',
      siteId: '',
      houseId: '',
      custom: true,
      tenantid: 1128,
      myChart1: {},
      myChart2: {},
      myChart3: {},
    }
  },
  async created() {
    this.getData(this.siteId, this.activeName)
    // 泵房数据
    const res = await api.house({ tenantid: this.tenantid })
    res.data.forEach(item => {
      this.options.push({ value: item.site_name, label: item.site_name, id: item.id })
    })
  },
  methods: {
    // 选择泵房id
    getHouseId() {
      this.options.forEach(item => {
        if (item.value == this.houseId[0]) this.siteId = item.id
      })
      if (this.activeName == 'fix') {
        if (this.dateValue) {
          this.getData(this.siteId, this.activeName, this.startDate, this.endDate)
        }
      } else {
        this.getData(this.siteId, this.activeName)
      }
    },
    // 选择日期
    changeDate() {
      this.startDate = this.formatDate(this.dateValue[0], 'yyyy-MM-dd')
      this.endDate = this.formatDate(this.dateValue[1], 'yyyy-MM-dd')
      this.getData(this.siteId, this.activeName, this.startDate, this.endDate)
    },
    // 能耗分析的数据
    async getData(siteIdNum, typeStr, timeStart, endStart) {
      let id = { tenantid: this.tenantid, siteId: siteIdNum, type: typeStr, startDate: timeStart, endDate: endStart }
      const res = await api.energyInfo(id)
      // console.log(res)
      this.dataArr = res.data
      const fd_date = [], fd_elec_cnt = [], fd_water_cnt = [], per = []
      res.data.forEach((item, index) => {
        res.data[index].fd_date = item.fd_date.substring(5, item.fd_date.length)
        res.data[index].fd_elec_cnt = item.fd_elec_cnt.toFixed(1)
        res.data[index].fd_water_cnt = item.fd_water_cnt.toFixed(1)
        res.data[index].per = item.per.toFixed(1)
        fd_date.push(res.data[index].fd_date)
        fd_elec_cnt.push(res.data[index].fd_elec_cnt)
        fd_water_cnt.push(res.data[index].fd_water_cnt)
        per.push(res.data[index].per)
      })

      this.myChart1 = this.$echarts.init(document.querySelector('.three_echarts1'))
      this.myChart2 = this.$echarts.init(document.querySelector('.three_echarts2'))
      this.myChart3 = this.$echarts.init(document.querySelector('.three_echarts3'))

      this.initChart(this.myChart1, fd_elec_cnt, fd_date, '耗电量')
      this.initChart(this.myChart2, fd_water_cnt, fd_date, '供水量')
      this.initChart(this.myChart3, per, fd_date, '吨水电耗')
      // 根据窗口变化自动调节图表大小
      window.addEventListener('resize', () => {
        this.myChart1.resize()
        this.myChart2.resize()
        this.myChart3.resize()
      })
    },
    // 报表切换
    handleClick() {
      if (this.activeName == 'fix') {
        this.custom = false
        this.dataArr = []
      } else {
        this.custom = true
        this.startDate = ''
        this.endDate = ''
        this.dateValue = ''
        this.getData(this.siteId, this.activeName)
      }
    },
    formatDate(date, fmt) {
      // this.formatDate(date,'yyyy-MM-dd hh:mm:ss')
      let time = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        // eslint-disable-next-line no-dupe-keys
        's+': date.getMilliseconds(),
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in time) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (time[k]) : (('00' + time[k]).substr(('' + time[k]).length)))
        }
      }
      return fmt
    },

    initChart(myChart, data, date, title) {
      let option = {
        color: ['#80FFA5'],
        title: {
          text: title,
          x: 'center',
          y: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '11%',
          right: '5%',
          bottom: '0%',
          height: '70%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: date,
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: '#fff',
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false,//不显示坐标轴上的文字
            },
          }
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.consume {
  .consume_cont_top {
    width: 6.5rem;
    // margin-left: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      color: #fff;
      font-size: 0.12rem;
    }

    .el-cascader {
      width: 23%;
    }
  }

  .consume_cont {
    width: 9.75rem;
    height: 5.2rem;
    display: flex;
    justify-content: space-between;

    .consume_cont_left {
      width: 57%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;

      .left_select {
        display: flex;
        // justify-content: center;
        align-items: center;
        width: 100%;
        height: 6%;

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 45%;
          margin: 0 0.1rem;
        }

        h2 {
          font-size: 0.12rem;
          color: #fff;
          // margin: 0 .08rem;
        }
      }

      .consume_table {
        width: 100%;
        height: 83%;
      }
    }

    .consume_cont_right {
      width: 38%;

      .three_echarts_cont {
        width: 100%;
        margin-top: 0.2rem;
        height: 1.5rem;

        .three_echarts1,
        .three_echarts2,
        .three_echarts3 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>